<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>微信</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .all{
            padding-top:40px;
            padding-bottom: 50px;
        }
        img{
            border:0;
            width: 100%;
            vertical-align: middle;
        }
        .clearfix:after{
            content:"";
            clear:both;
            display:table
        }
        .fl{float:left}
      .header{
          background: #f2f2f2;
          font-weight: 900;
          height: 40px;
          line-height: 40px;
          text-align: center;
          position: fixed;
          top:0px;
          left:0px;
          width: 100%;
          z-index: 999;
      }
        .header img{
            width:31px;
            position:absolute;
            right:3%;
            top:15%;
        }
        .search{
            background:#f2f2f2;
            padding:10px;
            text-align:center;
            line-height:30px;
            /*z-index: 0;*/
        }
        .search .input{
            height:30px;
            background:white;
            border-radius:4px;
        }
        .search span{
            background: url("搜索.png") no-repeat 3px 0;
            padding-left:30px;
            font-size:14px;
        }
        .chatlist{
            background:#f2f2f2;
        }
        .chat{
            background:#f2f2f2;
            position:relative;
            margin:0 auto;
        }
        .pic{
            width:15%;
            padding:2%;
            box-sizing:border-box;
        }
        .pic img{
            border-radius:5px;
        }
        .txt{
            width:85%;
            padding:2%;
            box-sizing:border-box;
            border-bottom:1px solid #ccc;
        }
        .title{
            font-weight:900;
            font-size:14px;
        }
        .msg{
            font-size:12px;
            color:#999;
            margin-top:1%;
        }
        .time{
            position: absolute;
            top:10px;
            right: 5%;
            font-size:12px;
        }
        .nav{
            height: 98px;
            background: #f6f6f6;
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
            z-index:999;
        }
        .nav>div{
            font-size:15px;
            width:25%;
            text-align:center;
            line-height:55px;
            background:url("weixin.png") no-repeat center 3px;
            margin-top: 20px;
            padding-top: 20px;
        }
        .nav>div.friends{
            background-image:url(通讯录.png);
        }
        .nav>div.discover{
            background-image:url(发现.png);
        }
        .nav>div.my{
            background-image:url(我.png);
        }
           .add_menu{
            position:absolute;
            right:8px;
            top:38px;
            z-index:1000;
            display:none;
        }
    </style>
    <script>
        var i = 0;
        function showOrHide(){
            if(i==0){
                addMenu.style.display = "block";
                i = 1;
            }else{
                addMenu.style.display = "none";
                i = 0;
            }
        }
    </script>

</head>
<body>
<div class="all">
    <!--从头部开始-->
    <div class="header">微信
        <img src="加号.png"  onclick="showOrHide()"/>
    </div>
    <!--从头部结束-->
    <!--从搜索框开始-->
    <div class="search">
        <div class="input">
            <span>搜索</span>
        </div>
    </div>
    <!--从搜索框结束-->
    <!--从聊天列表开始-->
     <div class="chatlist">
         <script>
             for(var i=1;i<=2;i++){
                 document.write("<div class='chat clearfix'>");
                 document.write("<div class='pic fl'>");
                 document.write("<img src='1.png' />");
                 document.write("</div>");
                 document.write("<div class='txt fl'>");
                 document.write("<div class='title'>家电大处理</div>");
                 document.write("<div class='msg'>卖家电，做活动，我们不一样！不光……</div>");
                 document.write("</div>");
                 document.write("<div class='time'>下午5：25</div>");
                 document.write("</div>");
             }
             for(var i=1;i<=1;i++){
                 document.write("<div class='chat clearfix'>");
                 document.write("<div class='pic fl'>");
                 document.write("<img src='2.png' />");
                 document.write("</div>");
                 document.write("<div class='txt fl'>");
                 document.write("<div class='title'>文件传输</div>");
                 document.write("<div class='msg'>【图片】</div>");
                 document.write("</div>");
                 document.write("<div class='time'>下午5：25</div>");
                 document.write("</div>");
             }
             for(var i=1;i<=1;i++){
                 document.write("<div class='chat clearfix'>");
                 document.write("<div class='pic fl'>");
                 document.write("<img src='4.png' />");
                 document.write("</div>");
                 document.write("<div class='txt fl'>");
                 document.write("<div class='title'>微信支付</div>");
                 document.write("<div class='msg'>微信支付凭证</div>");
                 document.write("</div>");
                 document.write("<div class='time'>下午2：25</div>");
                 document.write("</div>");
             }    for(var i=1;i<=1;i++){
                 document.write("<div class='chat clearfix'>");
                 document.write("<div class='pic fl'>");
                 document.write("<img src='3.png' />");
                 document.write("</div>");
                 document.write("<div class='txt fl'>");
                 document.write("<div class='title'>订阅号消息</div>");
                 document.write("<div class='msg'>新华社这些“高情商”执法瞬间，真耐看</div>");
                 document.write("</div>");
                 document.write("<div class='time'>下午10：25</div>");
                 document.write("</div>");
             }
             for(var i=1;i<=50;i++){
                 document.write("<div class='chat clearfix'>");
                 document.write("<div class='pic fl'>");
                 document.write("<img src='1.png' />");
                 document.write("</div>");
                 document.write("<div class='txt fl'>");
                 document.write("<div class='title'>家电大处理</div>");
                 document.write("<div class='msg'>卖家电，做活动，我们不一样！不光……</div>");
                 document.write("</div>");
                 document.write("<div class='time'>下午5：25</div>");
                 document.write("</div>");
             }

         </script>
     </div>
    <div class="nav clearfix">
        <div class="wechat fl">微信</div>
        <div class="friends fl">通讯录</div>
        <div class="discover fl">发现</div>
        <div class="my fl">我</div>
    </div>
    <div class="add_menu" id="addMenu">
        <img src="add_menu.png" />
    </div>
 

</div>

    <!--从聊天列表结束-->
</div>
</body>
</html>